@extends('Layout/base')


<!-- 加载js -->
@section('header-js')

    <link rel="stylesheet" type="text/css" href="{{ asset('css/base.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/home.css') }}">
    <!-- <script type="text/javascript" src="{{ asset('js/index.js') }}"></script> -->
    <script type="text/javascript" src="{{ asset('js/js-tab.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/top.js') }}"></script>
    <link href="{{ asset('ads/css/lrtk.css') }}" rel="stylesheet" type="text/css">
    @sale()
    <script type="text/javascript" src="{{ asset('ads/js/jquery-1.8.3.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('ads/js/lrtk.js') }}"></script>
    @endsale


@endsection


<!-- 主体内容 -->
@section('content')
    <div class="yHeader">
        <div class="yNavIndex">
            <div class="pullDown">
            <h2 class="pullDownTitle">
                所有鞋类
            </h2>
            <ul class="pullDownList">
            <!-- 父级分类-->
            @foreach($types as $k => $type)
                <li data-id="{{ $type['id'] }}">
                    <i class="listi{{$k+1}}"></i>
                    <a href="{{ route('Home.goodsList', ['id' => $type['id']])}}" target="_blank">{{ $type['type_name'] }}</a>
                    <span></span>
                </li>
            @endforeach
           	<!--父级分类遍历结束-->
            </ul>

            <div class="yMenuListCon" style="width:110px">
            @foreach($types as $k => $v)
                <div class="yMenuListConin">
                    <div class="yMenuLCinLisi f1">
                        <ul>
                        <!--二级分类 -->
                            <li><a href="#"><i class="fr">></i></a></li>
                        <!--二级分类结束-->
                        </ul>
                    </div>

                    <!--二级分类下商品-->

                   	<!--二级分类下商品结束-->
                </div>
            @endforeach
            </div>

            </div>
            <ul class="yMenuIndex">
                <li><a href="{{route('Home.goodssale')}}" target="_blank">限时抢购</a></li>
                <li><a href="{{route('Home.goodsList')}}">全部商品</a></li>
                @foreach($types as $v)
                <li><a href="{{ route('Home.goodsList', ['id' => $v['id'] ])}}" target="_blank">{{$v['type_name']}}</a></li>
                @endforeach
            </ul>
        </div>
    </div>
</header>
<!-- header End -->

<!--- banner begin-->
<section id="pc-banner">
    <div class="yBanner">
        <div class="banner" id="banner" >
            @foreach($loops as $v)
            <a href="{{route('goods.goodsdetail', ['id' => $v['goods_id']])}}" class="d1" style="background:url( 'http://oydt3ttm3.bkt.clouddn.com/{{$v['loop_pic']}}') center no-repeat;background-color: black; padding-left:180px;"></a>
            @endforeach
            <div class="d2" id="banner_id">
                <ul>
                @foreach($loops as $v)
                    <li></li>
                @endforeach
                </ul>
            </div>
        </div>
        <div style="text-align:center;clear:both"></div>
    </div>
</section>
<!-- banner End -->


<div class="time-lists clearfix lazyload" isrequest="0" sortnum="0">
    <div style="width:1349px; height:510px; background-color:white;display: table-cell;vertical-align: middle;text-align: center;">
    <img src="{{ asset('images/lazyloading.gif')}}" align="middle" style="width:300px; height:300px;" />
    </div>
</div>

<!-- <div class="containers main-banner"><a href="#"><img src="{{ asset('img/ad/br1.jpg') }}" width="1200" height="105"></a> </div> -->

<div class="time-lists  clearfix" >
    <div class="time-list time-list-w fl">
        <div class="time-title time-clear-f"><h2>男子</h2>
            <ul class="brand-tab H-table clearfix fr" id="H-table">

            @foreach($manTypes as $k => $type)
                @if ($k == '0')
                <li class="cur" data-id="{{ $type['id'] }}"><a href="javascript:void(0);" class="cur" >{{ $type['type_name']}}</a></li>
                @else
                <li data-id="{{ $type['id'] }}"><a href="javascript:void(0);" >{{ $type['type_name']}}</a></li>
                @endif
            @endforeach
            </ul>
        </div>
        <div class="time-border time-border-h clearfix" >
            <div class="brand-img fl lazyload" isrequest="0" sortnum="1">
                <div style="width:1349px; height:510px; background-color:white;display: table-cell;vertical-align: middle;text-align: center;"><img src="{{ asset('images/lazyloading1.gif')}}" align="middle" style="width:300px; height:300px;" /></div>
            </div>
            <div class="brand-bar fl lazyload" isrequest="0" sortnum="2"><a href="#"><img src="{{ asset('images/lazyloading1.gif')}}" width="300" height="300"></a> </div>
            <div class="brand-poa fl">
              @foreach($manTypes as $k=>$v)
                <div class="brand-poa H-over clearfix" {{ $k=='0' ? 'style="display:block"':'style="display:none"'}} >
                  @if ($k == '0')
                    <ul>
                      @foreach($manGoods as $k => $manGood)
                        <li>
                            <div class="brand-imgss"><a href="{{ route('goods.goodsdetail', ['id' => $manGood['id']])}}"><img src="http://oydt3ttm3.bkt.clouddn.com/{{ $manGood['goods_pic']}}" width="220" height="165"></a></div>
                            <div class="brand-title"><a href="{{ route('goods.goodsdetail', ['id' => $manGood['id']])}}">{{ $manGood['goods_name'] }}</a> </div>
                            <div class="brand-price">￥{{ $manGood['price']}}</div>
                        </li>
                      @endforeach
                    </ul>
                  @else
                    <div style="width:1349px; height:510px; background-color:white;display: table-cell;vertical-align: middle;text-align: center;"><img src="{{ asset('images/lazyloading2.gif')}}" align="middle" style="width:300px; height:300px;" /></div>
                  @endif
                </div>
              @endforeach
            </div>
        </div>
    </div>
</div>

<div class="time-lists  clearfix lazyload" >
    <div class="time-list time-list-w fl">
        <div class="time-title time-clear-f2"><h2>女子</h2>
            <ul class="brand-tab H-table1 clearfix fr" id="H-table1">
              @foreach($womanTypes as $k => $type)
                  @if ($k == '0')
                  <li class="cur" data-id="{{ $type['id'] }}"><a href="javascript:void(0);" class="cur" >{{ $type['type_name']}}</a></li>
                  @else
                  <li data-id="{{ $type['id'] }}"><a href="javascript:void(0);" >{{ $type['type_name']}}</a></li>
                  @endif
              @endforeach
            </ul>
        </div>
        <div class="time-border time-border-h clearfix">
            <div class="brand-img fl lazyload" isrequest="0" sortnum="3">
                <div style="width:1349px; height:510px; background-color:white;display: table-cell;vertical-align: middle;text-align: center;"><img src="{{ asset('images/lazyloading1.gif')}}" align="middle" style="width:300px; height:300px;" /></div>
            </div>
            <div class="brand-bar fl lazyload" isrequest="0" sortnum="4"><a><img src="{{ asset('images/lazyloading1.gif')}}" width="300" height="300"></a>  </div>
            <div class="brand-poa fl">
              @foreach($womanTypes as $k=>$type)
                <div class="brand-poa H-over1 clearfix" {{ $k=='0' ? 'style="display:block"':'style="display:none"'}} >

                  @if ($k == '0')
                    <ul>

                      @foreach($womanGoods as $k => $womanGood )
                        <li>
                            <div class="brand-imgss"><a href="{{ route('goods.goodsdetail', ['id' => $womanGood['id']])}}"><img src="http://oydt3ttm3.bkt.clouddn.com/{{ $womanGood['goods_pic']}}" width="220" height="165"></a></div>
                            <div class="brand-title"><a href="{{ route('goods.goodsdetail', ['id' => $womanGood['id']])}}"> {{ $womanGood['goods_name'] }} </a> </div>
                            <div class="brand-price">￥{{ $womanGood['price']}} </div>
                        </li>
                        @endforeach
                    </ul>
                    @else
                    <div style="width:1349px; height:510px; background-color:white;display: table-cell;vertical-align: middle;text-align: center;"><img src="{{ asset('images/lazyloading2.gif')}}" align="middle" style="width:300px; height:300px;" /></div>
                    @endif
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

@endsection


<!-- js内容 -->
@section('foot-js')
<script type="text/javascript">banner() </script>
<!-- <script type="text/javascript" src="{{ asset('js/MSClass.js') }}"></script> -->
<script>
    //点击换一换
    function change() {

        $.ajax({
            type: 'get',
            url: '{{ route('Home.changeGoods')}}',
            data: 'num=6',
            dataType: 'json',
            beforeSend : function () {

                //显示loading的图片
                var str ='<div style="width:1349px; height:280px; background-color:white;display: table-cell;vertical-align: middle;text-align: center;"><img src="{{ asset('images/lazyloading2.gif')}}" align="middle" style="width:300px; height:300px;" /></div>';

                $('.change').html('');

                $('.change').html( str );


            },
            success: function (data) {


                var div = '<div class="yScrollList"><div class="yScrollListIn"><div style="display:block;" class="yScrollListInList yScrollListInList1"><ul>';

                for(key in data) {

                    div += '<li><a href="Home/goodsdetail/'+ data[key].id +'"><div style="width:140px; height:140px"><img src="http://oydt3ttm3.bkt.clouddn.com/'+ data[key].goods_pic +'" width="140"></div><p class="head-name pc-pa10">'+ data[key].goods_name+'</p><p class="label-default">$'+ data[key].price+'</p></a></li>';

                }

                div += '</ul></div></div></div>';

                $('.change').html('');

                $('.change').html( div );

            }

        });


    };


    //顶部分类
    $('.pullDownList li').mouseenter(function() {

        setTimeout(function(){

            $(".yMenuListCon").fadeIn();

        }, 1000);

        var that = $(this);

        //选项卡
        var o = $(this).addClass('menulihover menuliselected').siblings().removeClass('menulihover menuliselected').parent().next().children().eq( $(this).index() ).show().siblings().hide();
        // console.log(o.siblings().eq( that.index() ));
        //判断this是否请求过ajax
        if( that.data('exists') != 'yes') {

            $.get('{{ route('Home.type')}}', {id: $(this).attr('data-id')}, function(data){

                //拼接父级分类div
                var str = '<div class="yMenuLCinLisi fl"><ul>';

                for (var i=0; i<data.length; i++) {

                    str += '<li><a href="Home/goodslist?id='+ data[i].id +'" target="_blank">'+ data[i].type_name + '<i class="fr">></i></a></li>';
                }

                str += '</ul></div>';

                that.data('exists', 'yes');

                o.siblings().eq( that.index() ).html(str);

                }, 'json');

        }

    });

    //鼠标离开
    $(".pullDown").mouseleave(function(){
        $(".yMenuListCon").fadeOut();
        $(".yMenuListConin").fadeOut();

    });


    //懒加载
    //监听窗口滚动条
    $(window).on('scroll', function() {

        //循环所有lazyload class
        $('div.lazyload').each(function () {


            var that = $(this);

            //获取当前div的sortnum
            var sortnum = $(this).attr('sortnum');

            //获取滚动条的高度
            var scrollHeigth = $(document).scrollTop();

            //获取窗口的高度
            var windowHeight = $(window).height();

            //获取当前div距离文档顶部的高度
            var divHeight = $(this).offset().top;

            //当div显示在窗口超过100px并且没有请求过时才调用ajax
            if ( ((scrollHeigth + windowHeight - 100) > divHeight) && ($(this).attr('isrequest') == 0) ) {

                // console.log(typeof sortnum);
                // console.log(1);

                if (true) {

                    //修改isrequest为1 下次不再请求
                    $(this).attr('isrequest', 1);

                    var originInnerHtml = $(this).html();

                    $.ajax({

                        type: 'get',
                        url: '{{ route('Home.lazyload')}}',
                        data: 'sortnum=' + sortnum,
                        dataType: 'json',

                        success: function (data) {

                            //热销商品区
                            if (data.status == '200' && sortnum == '0') {

                                // console.log(typeof data.goodsObj);

                                var str = '<div class="time-list time-list-w fl"><div class="time-title time-clear"><h2>热卖区</h2><div class="pc-font fl"></div><a class="pc-spin fr" id="wtiao" onclick="change()" href="javascript:;">换一换</a> </div><div class="time-border change"><div class="yScrollList"><div class="yScrollListIn"><div style="display:block;" class="yScrollListInList yScrollListInList1"><ul>';

                                for(key in data.goodsObj) {


                                    str += '<li><a href="Home/goodsdetail/'+ data.goodsObj[key]['id'] +'"><div style="width:140px; height:140px"><img src="http://oydt3ttm3.bkt.clouddn.com/'+ data.goodsObj[key]['goods_pic'] +'" width="140"></div><p class="head-name pc-pa10">'+ data.goodsObj[key]['goods_name']+'</p><p class="label-default">$'+ data.goodsObj[key]['price']+'</p></a></li>';

                                }

                                str += '</ul></div></div></div></div></div></div>';

                                that.html('');

                                that.append(str);

                               //男鞋区
                            } else if (data.status == '200' && sortnum == '1') {


                                var branddiv = '<ul>';

                                for(key in data.goodsObj.brands) {

                                    branddiv +='<li><a href="Home/goodslist?id=1&brand_id='+data.goodsObj.brands[key]['id'] +'"><img src="http://oydt3ttm3.bkt.clouddn.com/'+ data.goodsObj.brands[key]['brand_logo'] +'" width="125" height="47"></a></li>';
                                }
                                branddiv += '</ul>';

                                that.html('');

                                that.append(branddiv);

                            } else if (data.status == '200' &&sortnum == '2') {

                                var pic = '<a href="javascript:;"><img src="{{ asset('images/nanzi.jpg') }}" width="300" height="476"></a>';

                                that.html('');

                                that.append(pic);
                            //女鞋区
                            } else if (data.status == '200' && sortnum == '3' ) {

                                var branddiv = '<ul>';

                                for(key in data.goodsObj.brands) {

                                    branddiv +='<li><a href="Home/goodslist?id=10&brand_id='+data.goodsObj.brands[key]['id'] +'"><img src="http://oydt3ttm3.bkt.clouddn.com/'+ data.goodsObj.brands[key]['brand_logo'] +'" width="125" height="47"></a></li>';
                                }

                                branddiv += '</ul>';

                                that.html('');

                                that.append(branddiv);


                            } else if (data.status == '200' && sortnum == '4') {

                                var pics = '<a href="javascript:;"><img src="{{ asset('images/nvzi.jpg') }}" width="300" height="476"></a>';

                                that.html('');

                                that.append(pics);


                            } else if (data.status == '404'){

                                    that.html('');

                                    str = '<p class="bg-success text-center lead" style="font-size:33px;">404</p>';

                                    that.append(str);


                            }
                        }
                    });
                }
            }
        });
    });

    //man选项卡
    $('.H-table li').click(function() {

        // console.log(1);

        var that = $(this);

        // console.log($(this).attr('data-id'));

        //选项卡
        var o = $(this).addClass('cur').siblings().removeClass('cur').parent().parent().next().children().last().children().eq( $(this).index() ).show().siblings().hide();

        if (that.data('exists') != 'yes') {

            //设置一个一次性定时器，延迟1秒去请求
            setTimeout(function() {

                $.get("{{ route('Home.typeGoods') }}", {'id': that.attr('data-id')}, function(data){

                    // console.log(that.attr('data-id'));
                    // console.log(data);

                    //拼接对应div显示的内容
                    var str = '<ul>';

                    for(key in data) {


                        str += '<li><div class="brand-imgss"><a href="Home/goodsdetail/'+ data[key].id +'"><img src="http://oydt3ttm3.bkt.clouddn.com/'+ data[key].goods_pic +'" width="220" height="165"></a></div><div class="brand-title"><a href="#">'+ data[key].goods_name +'</a> </div><div class="brand-price">￥'+ data[key].price +'</div></li>';


                    }


                    str += '</ul>';

                    o.siblings().eq( that.index() ).html('');

                    //把拼接好的内容写进div
                    o.siblings().eq( that.index() ).html( str );

                    //加上标记 下次不再请求
                    that.data('exists', 'yes');

                }, 'json');

            }, '500');

        }

    });

    //women选项卡 与上一个选项卡内容差不多一致
    $('.H-table1 li').click(function() {

        var thats = $(this);

        //选项卡
        var i = $(this).addClass('cur').siblings().removeClass('cur').parent().parent().next().children().last().children().eq( $(this).index() ).show().siblings().hide();

        // console.log(1);

        var that = $(this);

        // console.log($(this).attr('data-id'));

        var i = $(this).addClass('cur').siblings().removeClass('cur').parent().parent().next().children().last().children().eq( $(this).index() ).show().siblings().hide();

        if (that.data('exists') != 'yes') {

            setTimeout(function() {

                $.get("{{ route('Home.typeGoods') }}", {'id': that.attr('data-id')}, function(data){

                    console.log(that.attr('data-id'));
                    console.log(data);

                    var str2 = '<ul>';

                    for(key in data) {

                        str2 += '<li><div class="brand-imgss"><a href="Home/goodsdetail/'+ data[key].id +'"><img src="http://oydt3ttm3.bkt.clouddn.com/'+ data[key].goods_pic +'" width="220" height="165"></a></div><div class="brand-title"><a href="#">'+ data[key].goods_name +'</a> </div><div class="brand-price">￥'+ data[key].price +'</div></li>';
                    }


                    str2 += '</ul>';

                    i.siblings().eq( that.index() ).html('');

                    i.siblings().eq( that.index() ).html( str2 );

                    that.data('exists', 'yes');

                }, 'json');

            }, '500');

        }


    });









</script>
@endsection
